<template>
	<view class="page b-bg" id="result">
		<swiper class="swiper innerBox" vertical='true'>
				<swiper-item>
					<view class="swiper-item">
						<view class="dl">
							<view class="dt">活动名称</view>
							<view class="dd">{{obj.activity_title}}</view>
						</view>
						<view class="dl">
							<view class="dt">
								年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份
							</view>
							<view class="dd">2024</view>
						</view>
						<view class="dl" v-show="obj.id">
							<view class="dt">证书编号</view>
							<view class="dd">{{obj.id}}</view>
						</view>
						<view class="dl" v-show="obj.role">
							<view class="dt">参赛角色</view>
							<view class="dd">{{obj.role}}</view>
						</view>
						<view class="dl" v-show="obj.category">
							<view class="dt">作品类型</view>
							<view class="dd">{{obj.category}}</view>
						</view>
						<view class="dl" v-show="obj.city">
							<view class="dt">区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;域</view>
							<view class="dd">{{obj.city}}</view>
						</view>
						<view class="dl" v-show="obj.username">
							<view class="dt">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</view>
							<view class="dd">{{obj.username}}</view>
						</view>
						<view class="dl" v-show="obj.school">
							<view class="dt">学校/单位</view>
							<view class="dd">{{obj.school}}</view>
						</view>
						<view class="dl" v-show="obj.article_title">
							<view class="dt">作品名称</view>
							<view class="dd">{{obj.article_title}}</view>
						</view>
						<view class="dl" v-show="obj.awards">
							<view class="dt">奖次</view>
							<view class="dd">{{obj.awards}}</view>
						</view>
						<view class="btnBox">
							<view class="bt bt-a">证书预览</view>
						<!-- 	<view class="more">
								<image src="../../static/img/moreIcon.png" mode="" class="moreIcon"></image>
								上滑有更多查询结果
							</view> -->
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"></view>
				</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import mixin from '@/util/mixin.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				obj:{}
			};
		},
		onLoad() {
			this.obj = uni.getStorageSync('cert');
		}
	}
</script>

<style lang="scss">
     #result {
		height: 100%;
		padding: 36rpx;
		.innerBox {
			width: 100%;
			height: 100%;
		}
		.swiper-item {
			position: relative;
		}
		.dl {
			display: flex;
			.dt {
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				font-size: 30rpx;
			}
			.dd {
				width: 460rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 30rpx;
				height: 100rpx;
				padding: 0 20rpx;
			}
			&:nth-child(2n-1){
				background-color: #fff;
			}
		}
	 }
	 .btnBox {
		 padding-top: 20rpx;
	 	@include bt-s-1();
		.moreIcon {
			width: 22rpx;
			height: 22rpx;
		}
		.more {
			width: 100%;
			color:#ff2626;
			text-align: center;
			position: absolute;
			left: 0;
			bottom: -70rpx;
		}
	 }
</style>
